<template>
  <div class="paper-list-container">
    <!-- 操作按钮区域 -->
    <div class="operation-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleAddPaper"
        >新增试卷</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        @click="handleBatchDelete"
        :disabled="selection.length === 0"
        >批量删除</el-button
      >

      <div class="operation-info" v-if="selection.length > 0">
        <span>已选择 {{ selection.length }} 项</span>
        <span style="margin-left: 20px">本次查询耗时：{{ queryTime }}毫秒</span>
        <el-button type="text" @click="clearSelection" style="margin-left: 20px"
          >清空</el-button
        >
      </div>
    </div>

    <!-- 试卷表格 -->
    <el-table
      :data="paperList"
      border
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      ref="paperTable"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column
        prop="name"
        label="试卷名称"
        width="250"
      ></el-table-column>
      <el-table-column prop="type" label="试题类型" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type === '固定试题' ? 'primary' : 'success'">
            {{ scope.row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.difficulty"
            disabled
            :max="3"
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
          ></el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="使用状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="statusType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            v-if="scope.row.status !== '应用中'"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
            v-if="scope.row.status !== '应用中'"
            >修改</el-button
          >
          <el-button size="mini" type="info" @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="handleComplete(scope.row)"
            v-if="scope.row.status !== '完成'"
            >完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "PaperList",
  data() {
    return {
      selection: [], // 选中的试卷
      queryTime: 345, // 查询耗时
      paperList: [
        {
          id: 1,
          name: "2023年语文月考试卷",
          type: "随机试题",
          difficulty: 1,
          status: "基础用",
        },
        {
          id: 2,
          name: "2023年语文月考试卷",
          type: "随机试题",
          difficulty: 2,
          status: "已知用",
        },
        {
          id: 3,
          name: "2023年语文月考试卷",
          type: "随机试题",
          difficulty: 3,
          status: "应用中",
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 100,
      },
    };
  },
  methods: {
    // 状态标签类型
    statusType(status) {
      const map = {
        基础用: "info",
        已知用: "",
        应用中: "warning",
        完成: "success",
      };
      return map[status] || "";
    },
    // 选择变化
    handleSelectionChange(val) {
      this.selection = val;
    },
    // 清空选择
    clearSelection() {
      this.selection = [];
      this.$refs.paperTable.clearSelection();
    },
    // 新增试卷
    handleAddPaper() {
      this.$router.push("/main/paper-manage/add");
    },
    // 批量删除
    handleBatchDelete() {
      if (this.selection.length === 0) {
        this.$message.warning("请选择要删除的试卷");
        return;
      }

      this.$confirm(
        `确定删除选中的 ${this.selection.length} 份试卷吗？`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          // 获取所有选中试卷的ID
          const selectedIds = this.selection.map((item) => item.id);
          // 过滤掉选中项
          this.paperList = this.paperList.filter(
            (item) => !selectedIds.includes(item.id)
          );
          this.$message.success("批量删除成功");
          this.clearSelection();
        })
        .catch(() => {});
    },
    // 删除单条
    handleDelete(row) {
      this.$confirm(`确定删除试卷 "${row.name}" 吗?`, "提示", {
        type: "warning",
      }).then(() => {
        this.paperList = this.paperList.filter((item) => item.id !== row.id);
        this.$message.success("删除成功");
      });
    },
    // 编辑
    handleEdit(row) {
      this.$message.info(`编辑试卷: ${row.name}`);
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        path: "/main/paper-manage/detail",
        query: { id: row.id }, // 可以传递试卷ID
      });
    },
    // 完成
    handleComplete(row) {
      this.$confirm(`确定标记试卷 "${row.name}" 为完成状态吗?`, "提示", {
        type: "warning",
      }).then(() => {
        row.status = "完成";
        this.$message.success("操作成功");
      });
    },
    // 分页大小变化
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.fetchData();
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchData();
    },
    // 获取数据
    fetchData() {
      console.log("获取试卷数据:", this.pagination);
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.paper-list-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.operation-info {
  margin-left: auto;
  font-size: 14px;
  color: #666;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
